<template>
  <scroll class="s-swiper" :probeType="3" :listenScroll="true" @scroll="scroll" :data1="weekendList">
    <div id="home">
      <home-header />
      <home-swiper :swiperList="swiperList"></home-swiper>
      <icons :iconsList="iconsList"></icons>
      <recommend></recommend>
      <weekend :weekendList="weekendList"></weekend>
    </div>
    <home-header class="fixed-header" v-show="showTitle" :style="opacityStyle"></home-header>
    <div v-show="showdata" class="loading">
      <loading />
    </div>
  </scroll>
</template>

<script scoped>
import Loading from 'common/loading/Loading'
import Scroll from 'common/scroll/Scroll'
import HomeHeader from './components/Header'
import HomeSwiper from './components/HomeSwiper'
import Icons from './components/Icons'
import Recommend from './components/Recommend'
import Weekend from './components/Weekend'

import { getHomeData } from 'network/home.js'
import { mapState } from 'vuex'

const disMinY = 60
const disMaxY = 140

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    Icons,
    Recommend,
    Weekend,
    Scroll,
    Loading
  },
  data () {
    return {
      lastCity: '',
      swiperList: [],
      iconsList: [],
      // recommendList: [],
      weekendList: [],
      showTitle: false,
      opacityStyle: {
        opacity: 0
      },
      showdata: true
    }
  },
  computed: {
    ...mapState(['currentCity'])
  },
  mounted () {
    this.lastCity = this.currentCity
    this.getHomeMultiData()
  },
  methods: {
    getHomeMultiData () {
      getHomeData().then(res => {
        if (res.ret) {
          const data = res.data
          this.swiperList = data.swiperList
          this.iconsList = data.iconList
          // this.recommendList = data.recommendList
          this.weekendList = data.weekendList
          this.showdata = false
        }
      })
    },
    scroll (newPos) {
      const posY = -newPos.y
      if (posY && posY > disMinY) {
        let opacity = posY / disMaxY
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showTitle = true
      } else {
        this.showTitle = false
      }
    }

  },
  activated () {
    if (this.lastCity !== this.currentCity) {
      this.lastCity = this.currentCity
      this.getHomeMultiData()
    }
  }
}
</script>

<style lang='less' scoped>
.s-swiper{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  #home {
    width: 100%;
  }
  .fixed-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .loading{
    position: absolute;
    width: 100%;
    top:50%;
    transform:translateY(-50%)
  }
}
</style>
